<template>
  <NavBarVue :title="'活动详情'"/>
  <view class="active_detail">
    <view class="top_box">
      <view class="message-detail">
        <view class="message">
          <view class="message-title">
            蛋糕美食大赛
          </view>
          <view class="message-time">
            活动时间：12:00-24:00
          </view>
        </view>
        <view class="message-detail">
          品尝美食大赛，期待你的到来
        </view>
      </view>
      <view class="x_scroll">
        <scroll-view class="scroll-view_H" enable-flex scroll-x="true" @scroll="scroll" scroll-left="0">
          <view
              v-for="(item, key) in ['http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png', 'http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png']"
              :key="key" style="width: 320rpx;height: 240rpx;margin-left: 8rpx;">
            <BaseCoverImage :src="item"/>
          </view>
        </scroll-view>
      </view>
      <view class="message-image">
        <BaseCoverImage
            src="http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png"
            mode="aspectFill"
        />
      </view>
    </view>
    <view class="bottom_box">
      <view class="hot_title">活动店铺</view>
      <view class="coupon_list" v-for="item in activity" :key="item.id">
        <view class="li_top">
          <view class="li_h2">
            {{item.title}}
          </view>
        </view>
        <view class="li_con">
          <view class="li-message">
            <BaseCoverImage :src="item.img" style="width: 112rpx;height: 112rpx;"/>
            <view class="con_right">
              <view>活动时间：{{item.times}}</view>
              <view class="con_p">
                <view>人均：{{item.num}}/人</view>
              </view>
              <view class="con_p">{{item.slogan}}</view>
            </view>
          </view>
          <button class="li_btn">领取优惠券</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 活动列表
const activity = [{
  img: "http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png",
  title: "精品蛋糕",
  times: "21:00-02:00",
  range: "21:00至次日06:00内",
  num: 20,
  slogan: "北京市海淀区中鼎大厦B座"
},
  {
    img: "http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png",
    title: "爱吃蛋糕",
    times: "21:00-02:00",
    range: "21:00至次日06:00内",
    num: 20,
    slogan: "北京市海淀区中鼎大厦B座"
  }
]
</script>

<style lang="scss">
.active_detail {
  box-sizing: border-box;
  padding: 0 20rpx;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: PingFangSC, PingFang SC;
  background-color: #F8F8F8;
}

.top_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .message {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .message-title {
      font-weight: 600;
      font-size: 50rpx;
      color: #222222;
      line-height: 55rpx;
      text-align: justify;
      font-style: normal;
    }

    .message-time {
      padding-left: 30rpx;
    }
  }

  .x_scroll {
    margin: 30rpx 0;

    .scroll-Y {
      height: 300rpx;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      height: 240rpx;
      margin: 10rpx 0rpx;
      display: flex;
      flex-direction: row;
    }
  }

  .message-image {
    border-top: 1px solid #b2b2b2;
    padding: 40rpx 0 20rpx;
  }
}

.bottom_box {
  flex: 1;
  display: flex;
  flex-direction: column;

  .shadow {
    width: 100%;
    height: 16rpx;
  }

  .shop_image {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #fff;
  }

  .shop_image button {
    margin-top: 30rpx;
    background-color: #FF4D65;
    color: #fff;
    font-size: 32rpx;
  }

  .hot_title {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 30rpx;
    font-size: 32rpx;
    color: #222222;
  }

  .coupon_list {
    background-color: white;
    color: #9C9C9C;
    margin-top: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;

    .li_top {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      margin-bottom: 20rpx;
    }

    .li_con {
      display: flex;
      justify-content: space-between;

      .li-message {
        display: flex;
      }

      .con_right {
        margin-left: 30rpx;
        font-size: 24rpx;

        .con_p {
          padding: 2rpx 0rpx;
        }
      }
    }

    .li_bom {
      flex: 1;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}

.li_btn {
  float: right;
  width: 168rpx;
  height: 64rpx;
  padding: 0rpx;
  margin: 0rpx;
  font-size: 24rpx;
  border-radius: 70rpx;
  line-height: 64rpx;
  color: white;
  background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
}
</style>